<script setup>

import SettingHeader from "@/components/SettingHeader.vue";
import {onMounted, ref} from "vue";
import {useUserStore} from "@/stores/UserStore.js";
import axios from "axios";

const type = defineProps({
  id: String,
  status: Number
})

const title = ref("Steam绑定")

const userStore = useUserStore()

const steam = async () => {
  window.location.href = 'https://steamcommunity.com/openid/login?\n' +
      'openid.ns=http://specs.openid.net/auth/2.0&\n' +
      'openid.mode=checkid_setup&\n' +
      'openid.return_to=http://localhost:3000/login&\n' +
      'openid.realm=http://localhost:3000/&\n' +
      'openid.identity=http://specs.openid.net/auth/2.0/identifier_select&\n' +
      'openid.claimed_id=http://specs.openid.net/auth/2.0/identifier_select';
}

onMounted(async () => {
  if (type.id) {
    if ((await axios.get(`http://localhost:8081/user/steamID/${userStore.getUserInfo.id}/${type.id}`)).data) {
      console.log('fine')
      const tempUser = useUserStore().getUserInfo;
      tempUser.steamId = type.id || tempUser.steamId;
      userStore.login(tempUser)
      userStore.removeGame()
    }
  }
})
</script>

<template>
  <SettingHeader :title = "title" :url="{name:'setting'}" />
  <div>
    <ul class = "p-2">
      <li class = "d-flex border p-2" @click = "steam"><span>Steam: {{
          userStore.getUserInfo.steamId ? userStore.getUserInfo.steamId : "请绑定"
        }}</span><span><svg class = "icon"
                            viewBox = "0 0 1024 1024"
                            version = "1.1"
                            xmlns = "http://www.w3.org/2000/svg"
                            width = "32" height = "24"><path
          d = "M562.005333 512l-211.2-211.2 60.330667-60.288L682.666667 512l-271.530667 271.530667-60.330667-60.373334 211.2-211.2z"
          fill = "#808080"></path></svg></span>
      </li>
    </ul>
  </div>
</template>

<style scoped>
div {
  width: 98%;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  margin: auto;
  position: relative;
  height: 50px;
  cursor: pointer;
}

li span:first-child {
  line-height: 32px;
}

li span:last-child {
  position: absolute;
  right: 3%;
  top: 10px;
}
</style>